<template>
	<view>
		<view class="details">
			<!-- 显示学历证或学位证信息 -->
			<view v-if="certificateType === '1'">
				<text>证书类别: 学历证</text>
				<text>证书名称: {{ certificateName }}</text>
				<text>姓名（工号）: {{ realName }} ({{ staffNum }})</text>
				<text>部门: {{ deptName }}</text>
				<text>岗位: {{ postName }}</text>
				<text>证书编号: {{ code }}</text>
				<text>毕业院校: {{ school }}</text>
				<text>学历层次: {{ education }}</text>
				<text>专业: {{ major }}</text>
				<text>学制: {{ xuezhi }}</text>
				<text>毕业时间: {{ graduationDate }}</text>
				<text>取得时间: {{ getDate }}</text>
				<text>描述: {{ desc || "无" }}</text>
			</view>
			<view v-else-if="certificateType === '2'">
				<text>证书类别: 学位证</text>
				<text>证书名称: {{ certificateName }}</text>
				<text>姓名（工号）: {{ realName }} ({{ staffNum }})</text>
				<text>部门: {{ deptName }}</text>
				<text>岗位: {{ postName }}</text>
				<text>证书编号: {{ code }}</text>
				<text>专业: {{ major }}</text>
				<text>学位名称: {{ degree }}</text>
				<text>授予单位: {{ fromDw }}</text>
				<text>取得时间: {{ getDate }}</text>
				<text>描述: {{ desc || "无" }}</text>
			</view>

			<!-- 如果有证书图片，显示缩略图 -->
			<view v-if="certificateUrls.length > 0 && isShowImg" class="thumbnails">
				<image v-for="(url, index) in certificateUrls" :key="index" :src="url" mode="aspectFill"
					@click="previewImage(index)" class="thumbnail" />
			</view>
			<view v-if="isShowImg == false">
				<view v-for="(url, index) in certificateUrls" :key="index">
					{{url.split("/").pop()}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import isHaveBug from "../../../utils/bug";
	import {
		getCertificate
	} from "@/api/work/certificate";
	export default {
		data() {
			return {
				isShowImg: true,
				certificateType: "",
				certificateName: "",
				realName: "",
				staffNum: "",
				deptName: "",
				postName: "",
				code: "",
				school: "",
				education: "",
				major: "",
				xuezhi: "",
				graduationDate: "",
				getDate: "",
				desc: "",
				certificateUrls: [],
				fromDw: "",
				degree: "",
			};
		},
		onLoad(options) {
			if (isHaveBug("HR-APP-019")){
				this.isShowImg = false
			}
			const id = options.id;
			this.fetchDetails(id);
		},
		methods: {
			fetchDetails(id) {
				function getBaseUrl() {
					const serverIp = uni.getStorageSync("serverIp") || "localhost";
					const serverPort = uni.getStorageSync("serverPort") || "8182";
					return `http://${serverIp}:${serverPort}`;
				}
				const baseUrl = getBaseUrl();
				getCertificate(id).then((response) => {
					const data = response.data;
					this.certificateType = data.certificateType;
					this.certificateName = data.certificateName;
					this.realName = data.realName;
					this.staffNum = data.staffNum;
					this.deptName = data.deptName;
					this.postName = data.postName;
					this.code = data.code;
					this.school = data.school;
					this.education = data.education;
					this.major = data.major;
					this.xuezhi = data.xuezhi;
					this.graduationDate = data.graduationDate;
					this.getDate = data.getDate;
					if (isHaveBug("HR-APP-018")) {
						this.desc = data.desc || " ";
					} else {
						this.desc = data.desc || "无";
					}
					this.degree = data.degree;
					this.certificateUrls = data.certificateUrls.split(",");
					this.certificateUrls.forEach((url, index) => {
						this.certificateUrls[index] = baseUrl + url;
					});
					this.fromDw = data.fromDw;
				});
			},
			previewImage(index) {
				if(!isHaveBug("HR-APP-020")){
					uni.previewImage({
						current: this.certificateUrls[index],
						urls: this.certificateUrls,
					});
				}
			},
		},
	};
</script>

<style scoped>
	/* 页面整体样式 */
	view.details {
		padding: 16px;
		background-color: #ffffff;
		font-size: 16px;
		color: #333;
	}

	/* 返回按钮样式 */
	view.back-button {
		padding: 12px;
		font-size: 18px;
		color: #007aff;
		text-align: left;
		background-color: #f9f9f9;
		border-bottom: 1px solid #e5e5e5;
	}

	/* 信息项样式 */
	view.details text {
		display: block;
		margin-bottom: 8px;
		line-height: 1.5;
		color: #555;
	}

	/* 缩略图容器 */
	.thumbnails {
		display: flex;
		flex-wrap: wrap;
		margin-top: 16px;
	}

	/* 单个缩略图样式 */
	.thumbnail {
		width: 80px;
		height: 80px;
		margin-right: 8px;
		margin-bottom: 8px;
		border-radius: 4px;
		border: 1px solid #e5e5e5;
	}

	.thumbnail:last-child {
		margin-right: 0;
	}
</style>